<template>
	<BaseContainer>
		<template v-slot:left>
			<el-menu :default-active="activeName" :default-openeds="defaultOpeneds" @select="handleSelect">
				<el-sub-menu :index="submenu.id" v-for="submenu in menuData" :key="submenu.id">
					<template #title>
						<span>{{submenu.label}}</span>
					</template>
					<el-menu-item  v-for="menu in submenu.children" :key="menu.id" :index="menu.id">{{menu.label}}</el-menu-item>
				</el-sub-menu>
			</el-menu>
		</template>
		
    <div class="main" :key="activeName">
      <el-scrollbar   max-height="80vh">
        <PreviewTable  v-for="(item,index) in dataList" :key="index" :item="item" class="mt10"></PreviewTable>
      </el-scrollbar>
    </div>
	</BaseContainer>
</template>

<script setup lang="ts">
import apiMod from '@/apiMod'
import PreviewTable from './PreviewTable/index.vue'
const defaultOpeneds = ['archives','order','subsidy','baseDb']

const activeName = ref('2')
const menuData = [
  {
    label:'档案数据',
    id:'archives',
    children:[
      {
        label:'健康档案',
        id:'1',
      },
      {
        label:'家床建设档案',
        id:'2',
      },
      {
        label:'适老化改造档案',
        id:'3',
      },
      {
        label:'能力评估',
        id:'4',
      },
      {
        label:'等级评定',
        id:'5',
      },
    ],
  },
  {
    label:'社区居家养老服务工单',
    id:'order',
    children:[
      {
        label:'80周岁照护服务',
        id:'6',
      },
      {
        label:'家庭养老床位服务',
        id:'7',
      },
      {
        label:'站点服务',
        id:'8',
      },
    ],
  },
  {
    label:'补贴资金数据',
    id:'subsidy',
    children:[
      {
        label:'尊老金',
        id:'9',
      },
      {
        label:'机构运营补贴',
        id:'10',
      },
      {
        label:'站点服务',
        id:'8',
      },
    ],
  },
  {
    label:'基础数据',
    id:'baseDb',
    children:[
      {
        label:'服务对象',
        id:'11',
      },
      {
        label:'养老服务设施',
        id:'12',
      },
      {
        label:'养老服务机构',
        id:'13',
      },
    ],
  }
]


const dataList = ref([])
const handleSelect = (index)=> {
  activeName.value = index
  getInitData()
}

const getInitData = ()=> {
  apiMod.view_tableTemplate_page({templateCategory:activeName.value}).then(res=> {
    console.log(res,'res---dsfsdf')
    const data  = res.data 
    dataList.value = data.records
  })
}

onMounted(()=> {
  getInitData()
})

</script>
<style scoped lang="scss">
:deep(.el-sub-menu__title) {
  &:hover {
    background-color:var(--vt-c-active-primary);
  }
}
</style>
